<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>栏目编辑</title>
    <link rel="stylesheet" href="__ADMIN__/vendor/layui/css/layui.css">
    <link rel="stylesheet" href="__ADMIN__/custom/css/style.css">
    <style>
        .layui-form-select dl{z-index: 2;}
        #thumb_list{padding-top: 8px;}
        #thumb_list img{border: 1px solid #DDD;padding: 3px;border-radius: 5px;}
        #thumb_list span{position: relative;display: inline-block;margin-right: 5px;}
        #thumb_list span .delimg{position: absolute;right:3px;top:3px;}
    </style>
</head>
<body style="padding:0 10px;padding-bottom: 45px;">
<div class="">
    <form class="layui-form" action="?" method="post">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">基本设置</li>
                <li>扩展设置</li>
                <li>内容设置</li>
            </ul>
            <div class="layui-tab-content">
                <!--基本设置-->
                <div class="layui-tab-item layui-show layui-anim layui-anim-upbit">
                    <div class="layui-form-item" style="z-index:100">
                        <label class="layui-form-label">上级栏目</label>
                        <div class="layui-input-inline">
                            <select name="pid" lay-verify="required">
                                <option value="0">顶级栏目</option>
                                {volist name="cate" id="vo"}
                                <option value="{$vo.id}" {eq name="vo.id" value="$curcate.pid"}selected{/eq}>{$vo.name}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">栏目名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" value="{$curcate.name}"  required lay-verify="required" placeholder="请输入栏目名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">类型</label>
                        <div class="layui-input-block">
                            <input type="radio" name="type" value="1" title="单页" {eq name="curcate->getData('type')" value="1"}checked{/eq}>
                            <input type="radio" name="type" value="2" title="摄影作品" {eq name="curcate->getData('type')" value="2"}checked{/eq}>
                            <input type="radio" name="type" value="3" title="模特资料" {eq name="curcate->getData('type')" value="3"}checked{/eq}>
                            <input type="radio" name="type" value="4" title="摄影场景" {eq name="curcate->getData('type')" value="4"}checked{/eq}>
                            <input type="radio" name="type" value="5" title="新闻资讯" {eq name="curcate->getData('type')" value="5"}checked{/eq}>
                            <input type="radio" name="type" value="6" title="专业团队" {eq name="curcate->getData('type')" value="6"}checked{/eq}>
                            <input type="radio" name="type" value="7" title="联系我们" {eq name="curcate->getData('type')" value="7"}checked{/eq}>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">标识</label>
                        <div class="layui-input-inline">
                            <input type="text" name="mark" value="{$curcate.mark}" placeholder="请输入栏目标识" autocomplete="off" class="layui-input" style="width: 150px;">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否显示</label>
                        <div class="layui-input-block">
                            <input type="radio" name="isshow" value="1" title="显示" {$curcate.isshow?"checked":""}>
                            <input type="radio" name="isshow" value="0" title="隐藏" {$curcate.isshow?"":"checked"}>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-inline">
                            <input type="text" name="sort" value="{$curcate.sort}" required lay-verify="required" placeholder="请输入排序" autocomplete="off" class="layui-input" style="width: 80px;">
                        </div>
                    </div>
                </div>
                <!--扩展设置-->
                <div class="layui-tab-item layui-anim layui-anim-upbit">
                    <div class="layui-form-item">
                        <label class="layui-form-label">栏目图片</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="pic" value="{$curcate.pic}" placeholder="请输入栏目图片" autocomplete="off" class="layui-input">
                            <button type="button" class="layui-btn" id="uploadimg">
                                <i class="layui-icon">&#xe67c;</i>上传栏目图片
                            </button>
                            <div id="thumb_list">
                                {if condition="$curcate.pic!=''"}
                                {volist name="$curcate.pics" id="vo"}
                                <span>
                                    <img src="/{$vo}" alt="" height="80">
                                    <button type="button" class="layui-btn layui-btn-danger layui-btn-mini delimg" onclick="delimg(this);" data="{$vo}">
                                    <i class="layui-icon">&#xe640;</i>
                                    </button>
                                </span>
                                {/volist}
                                {/if}
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">关键字</label>
                        <div class="layui-input-block">
                            <input type="text" name="keyword" value="{$curcate.keyword}" placeholder="请输入关键字" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-block">
                            <textarea name="desc" placeholder="请输入描述" class="layui-textarea">{$curcate.desc}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">摘要</label>
                        <div class="layui-input-block">
                            <textarea name="remark" placeholder="请输入摘要" class="layui-textarea">{$curcate.remark} </textarea>
                        </div>
                    </div>
                </div>
                <!--内容设置-->
                <div class="layui-tab-item layui-anim layui-anim-upbit">
                    <div class="layui-form-item">
                        <label class="layui-form-label">内容</label>
                        <div class="layui-input-block">
                            <script id="content" name="content" type="text/plain" style="height:300px;">{$curcate.content} </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item" >
            <label class="layui-form-label"></label>
            <div class="">
                <button class="layui-btn layui-btn-danger layui-btn-big" lay-submit lay-filter="formDemo" style="margin-left:8px;">确定</button>
            </div>
        </div>
    </form>
</div>
<script src="__ADMIN__/vendor/js/jquery.js"></script>
<script src="__ADMIN__/vendor/layui/layui.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="__ADMIN__/vendor/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__ADMIN__/vendor/ueditor/ueditor.all.js"></script>
<script src="__ADMIN__/custom/js/admin.js"></script>
<script>
    var ue = UE.getEditor('content');
    layui.use(['form','element','upload'], function(){
        var form = layui.form;
        var element = layui.element;
        var upload = layui.upload;
        //监听提交
        form.on('submit(formDemo)', function(data){
        });
        //创建一个上传组件
        upload.render({
            elem: '#uploadimg'
            ,url: '{:url("category/uploadimg")}'
            ,accept: 'images' //允许上传的文件类型
            ,field:"imgfile"
            ,size: 2048 //最大允许上传的文件大小
            ,done: function(res, index, upload){ //上传后的回调
                layer.close(layer.index,{isOutAnim:true});
                setTimeout(function () {
                    layer.msg(res.msg);
                    if(res.code==1){
                        var pic=$('input[name=pic]').val();
                        if(pic==""){
                            $('input[name=pic]').val(res.img);
                        }else{
                            $('input[name=pic]').val(pic+","+res.img);
                        }
                        var str;
                        str="<span>";
                        str=str+'<img src="/'+res.img+'" alt="" height="80">';
                        str=str+'<button type="button" class="layui-btn layui-btn-danger layui-btn-mini delimg" onclick="delimg(this);" data="'+res.img+'">';
                        str=str+'<i class="layui-icon">&#xe640;</i>';
                        str=str+'</button>';
                        str=str+'</span>';
                        $('#thumb_list').append(str);
                    }else{

                    }

                },500);
            }
            ,before:function () {
                var index = layer.load();
            }

            //,……
        })
    });
    $(function(){
        $(window.parent.document).find('#righttitle').text($('title').text());
    });
    function delimg(obj) {
       var picurl=$(obj).attr('data');
       $.ajax({
           type:"post",
           url:"{:url('category/delimg')}",
           data:{'url':picurl},
           success:function (res) {
              var picvalue=$('input[name=pic]').val();
              var str="";
               if(res.code==1 || res.code==2){
                   //栏目图文本框中图片地址处理
                   if(picvalue==picurl){
                       $('input[name=pic]').val('');
                   }else{

                       str=picvalue.replace(picurl+",","");
                       str=str.replace(","+picurl,"");
                       $('input[name=pic]').val(str);
                   }
                   //删除/移除缩略图
                   $(obj).parent().remove();
                   layer.msg(res.msg);
               }
               if(res.code==0){
                   layer.msg(res.msg);
               }
           }
       });
    }
</script>
</body>
</html>